<script setup>
defineProps({
  item: {
    type: Object,
  },
});
</script>

<template>
  <div class="order-item">
    <div class="title">
      <div class="time">2025-5-27 17:28:56</div>
      <div class="status">待发货</div>
    </div>
    <div class="list">
      <div class="item" v-for="ele in item.goods" :key="ele.goods_id">
        <div class="img">
          <img :src="ele.goods_image" alt="" />
        </div>
        <div class="title">{{ ele.goods_name }}</div>
        <div class="price-and-num">
          <p>￥{{ ele.goods_price }}</p>
          <p>X {{ ele.total_num }}</p>
        </div>
      </div>
      <div class="total">共{{ 123 }}件商品，总金额￥{{ item.total_price }}</div>
    </div>
    <div class="action">
      <span>申请取消</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-item {
  padding: 20px;
  border-bottom: 1px solid rgb(220, 218, 218);
  & > .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 16px;
    .status {
      color: red;
    }
  }
  .list {
    .item {
      display: flex;
      height: 95px;
      margin-bottom: 10px;
      .img {
        width: 90px;
        height: 90px;
        padding: 7px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .title {
        flex: 2;
        margin-top: 6px;
        word-break: break-all;
        font-size: 13px;
        overflow: hidden; /* 隐藏超出内容 */
        text-overflow: ellipsis;
      }
      .price-and-num {
        flex: 0.8;
        text-align: right;
        margin-top: 10px;
        color: rgb(174, 173, 173);
      }
    }
    .total {
      text-align: right;
      font-size: 12px;
      color: rgb(70, 70, 70);
    }
  }
  .action {
    text-align: right;
    margin-top: 15px;
    span {
      border: 1px solid rgb(157, 156, 156);
      padding: 5px 10px;
      color: rgb(59, 58, 58);
    }
  }
}
</style>
